<template>
<div>
	<ol class="breadcrumb">
      <li class="breadcrumb-item">热词管理</li>
    </ol>
    <div class="tag-container pt-2 pb-2">
    	<div class="tags-m-box">
	    	<div class="tags-m-title">
	    		推荐字幕：
	    		<span @click="addphrase" class="btn btn-sm btn-success cursor">新增</span>
	    		<span @click="managephrase" 
	    			:class="[phraseflag ? 'btn-danger' : 'btn-outline-danger']"
	    			class="btn ml-4 btn-sm  cursor">管理</span>
	    	</div>
	    	<!-- @click.alt.exact.capture="deletephrase(item.id)" -->
	    	<div class="tags-m-list pt-2 clearfloat">
	    		<div @click="editphrase(item.id,item.text)" 
	    			v-for="item in phraselist.items" 
	    			class="tags-m-name mr-3 mb-3 pr">{{item.text}}
	    			<span v-if="phraseflag" @click.stop="deletephrase(item.id)" class="deleteBu text-danger fa fa-times-circle"></span>
	    		</div>
	    	</div>
	    </div>
	    <Pagepublic @paging="loadphrase" :pages="phraselist"></Pagepublic>
    </div>
    <div class="tag-container pt-2 pb-2">
    	<div class="tags-m-box">
	    	<div class="tags-m-title">
	    		首页热词：
	    	</div>
	    	<div class="tags-m-list pt-2 clearfloat">
	    		<div v-for="item in indexTags.items" class="tags-m-name">{{item.name}}</div>
	    		<!-- <div class="tags-m-name"><i class="fa fa-plus"></i></div> -->
	    	</div>
	    </div>
    </div>
    <div class="tag-container pt-2 pb-2">
    	<div class="tags-m-box">
	    	<div class="tags-m-title">
	    		素材热词<span class="tip text-danger">(点击删除)</span>：
	    	</div>
	    	<div class="tags-m-list pt-2 clearfloat">
	    		<div @click="deleteMaterial(item.id)" v-for="item in materialTags.items" class="tags-m-name" v-if="item.type!==0">{{item.value}}</div>
	    		<div @click="addMaterial" class="tags-m-name"><i class="fa fa-plus"></i></div>
	    	</div>
	    </div>
    </div>
    <div class="tag-container pt-2 pb-2">
    	<div class="tags-m-box">
	    	<div class="tags-m-title">
	    		搜索热词<span class="tip">(搜索量前三十)</span>：
	    	</div>
	    	<div class="tags-m-list pt-2 clearfloat">
	    		<div v-for="item in searchTags.items" class="tags-m-name" v-if="item.type!==0">{{item.text}}({{item.searchNum}})</div>
	    		<!-- <div class="tags-m-name"><i class="fa fa-plus"></i></div> -->
	    	</div>
	    </div>
    </div>
</div>
</template>

<script>
import '../../../static/css/biaoqing/tags.css'
import { Tags } from '../../resources'
import { viewImg, clearViewImg,formatTime } from '../../misc/utils'
import toastr from '../../misc/toastr.esm'
import swal2 from 'sweetalert2'
import querystring from 'querystring'
import $ from 'jquery'
import Pagepublic from '../../widgets/pagepublic.vue'

export default {
	data: () => ({
		loading: false,
		phrasepage:1,
		indexTags:'',
		materialTags:'',
		searchTags:'',
		phraselist:'',
		phraseflag:false
	}),
	beforeRouteEnter (to,form,next) {
		var params = {
			pageSize:150,
		}
		var phrase = {
			pageSize:50,
			pageNum:1
		}
		var search={
			pageSize:30,
			sort:'search_num',
			asc:false
		}
		var req = [Tags.index(params),Tags.material(params),Tags.search(search),Tags.phrase(phrase)]
		Promise.all(req).then(([indexTags,material,searchTags,phraselist]) => {
    		next(vm => {
    			vm.indexTags = indexTags.data.data;
    			vm.materialTags=material.data.data;
    			vm.searchTags=searchTags.data.data;
    			vm.phraselist = phraselist.data.data;
    		})
		})
	},
    mounted () {
      	this.$emit('loaded',false)
    },
    methods: {
    	managephrase(){
    		this.phraseflag=!this.phraseflag
    	},
    	deletephrase(id){
    		var $this = this;
    		swal({
    			type:"warning",
    			title:'你确定？',
    			text:'是否删除当前字幕',
    			showCancelButton: true,
			    cancelButtonText: '取消',
			    confirmButtonText: '确定',
			    confirmButtonColor: '#DD6B55',
			    showLoaderOnConfirm: true,
			    closeOnConfirm: false
    		},function(){
    			$this.$http.delete('/phrase/'+id).then(res =>{
	    			if(res.data.code==200){
	    				$this.loadphrase($this.phrasepage)
	    				$this.$notice.success('删除成功')
	    			}else{
	    				$this.$notice.error(res.data.msg)
	    			}
	    		})
    			swal.close()
    		})
    	},
    	addphrase(){
    		var that = this;
			swal2({
			  title:'新增字幕',
			  html:'<textarea id="phrase"></textarea>',
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  showLoaderOnConfirm: true,
			  showCancelButton: true,
			  reverseButtons:true,
			  preConfirm:function(){
			  	var text=$('#phrase').val()
			  	return new Promise(function(resolve,reject){
			  		if(text !=''){
						var phrase = {
							text:text
						}
						swal2.close()
			    		that.$http.post('/phrase',phrase).then(res => {
			    			if(res.data.code==200){
			    				that.loadphrase(that.phrasepage);
			    				that.$notice.success(res.data.msg)
			    			}else{
			    				that.$notice.error(res.data.msg)
			    			}
			    		})
			  		}else{
			  			reject('请输入内容')
			  		}
			  	})
			  }
			}).catch(swal2.noop)
    	},
    	editphrase(id,text){
    		var that = this;
			swal2({
			  title:'修改字幕',
			  html:'<textarea id="phrase" value="'+text+'">'+text+'</textarea>',
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  showLoaderOnConfirm: true,
			  showCancelButton: true,
			  reverseButtons:true,
			  preConfirm:function(){
			  	var text = $('#phrase').val();
			  	return new Promise(function(resolve,reject){
			  		if(text !=''){
						var phrase = {
							id:id,
							text:text
						}
						swal2.close()
			    		that.$http.put('/phrase',phrase).then(res => {
			    			if(res.data.code==200){
			    				that.loadphrase(that.phrasepage);
			    				that.$notice.success(res.data.msg)
			    			}else{
			    				that.$notice.error(res.data.msg)
			    			}
			    		})
			  		}else{
			  			reject('请输入内容')
			  		}
			  	})
			  }
			}).catch(swal2.noop)
    	},
    	loadphrase(page){
    		var phrase = {
				pageSize:50,
				pageNum:page
			}
    		this.$http.get('/phrase',{params:phrase}).then(res => {
    			this.phraselist = res.data.data;
    			this.phrasepage= phrase.pageNum
    		})
    	},
    	loadMaterial(){
    		var params = {
				pageSize:150,
			}
    		Tags.material(params).then(res=>{
    			this.materialTags=res.data.data
    		})
    	},
    	deleteMaterial(){
    		var $this = this;
    		swal({
			    type: 'warning',
			    title: '您确定?',
			    text: '删除的记录将不能恢复!',
			    showCancelButton: true,
			    cancelButtonText: '取消',
			    confirmButtonText: '是的, 我要删除!',
			    confirmButtonColor: '#DD6B55',
			    showLoaderOnConfirm: true,
			    closeOnConfirm: false
			}, function(){
				swal.close();
				$this.$http.delete('/materialHot/'+id).then(res=>{
					if(res.data.code==200){
						$this.$notice.success('删除成功');
					}else{
						$this.$notice.error(res.data.msg);
					}
				})
			})
    	},
    	addMaterial(){
    		var $this = this;
    		swal2({
			  	title: '添加分类',
				input: 'text',
				showCancelButton: true,
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				showLoaderOnConfirm: true,
				reverseButtons:true,
			  	preConfirm:function(name){
			  		return new Promise(function(resolve,reject){
			  			if(name !=''){
							var data = {
							  "value": name,
							  "data":1
							}
							$this.$http.post('/materialHot/update',data).then( res => {
								if(res.data.code==200){
									swal2.close();
									$this.loadMaterial()
									$this.$notice.success('添加成功')
								}else{
									reject(res.data.msg);
								}
							})
			  			}else{
			  				reject('请输入分类名称');
			  			}
			  			
			  		})
			  	}
			}).catch(swal2.noop);
    	},
    	
    },
    components:{ Pagepublic }
}
</script>
<style>
	.deleteBu{
		position: absolute;
		right: -5px;
		top: -5px;
		font-size: 15px;
	}
	#phrase{
		width: 100%;
		resize: none;
		border-radius: 3px;
	}
</style>